<template>
  <div class="modalStyle">
    <div class="header">
      <div class="header_search">
        <el-input v-model="search" placeholder="请输入内容" :clearable="true"></el-input>
        <el-button @click="selectFunc" icon="el-icon-search" class="search_icon"></el-button>
      </div>

      <ul class="ulstyle">
        <li style="font-size: 14px; font-weight: 600">角色领域：</li>
        <li v-for="(item,index) in roleList"
            :key="index"
            @click="changeRolefunc(index)"
            :class="[roleListActived==index?'ulstyle_color':'']"
        >
          {{item.name}}
        </li>
      </ul>

      <ul class="ulstyle">
        <li style="font-size: 14px; font-weight: 600">项目类型：</li>
        <li v-for="(item,index) in projectList" :key="index"
            @click="changeTypefunc(index)"
            :class="[projectListActived==index?'ulstyle_color':'']">
          {{item.name}}
        </li>
      </ul>

      <ul class="ulstyle">
        <li style="font-size: 14px; font-weight: 600">项目周期：</li>
        <li v-for="(item, index) in projectTimeList"
            :key="index"
            @click="changeTimefunc(index)"
            :class="[projectTimeListActived==index?'ulstyle_color':'']">
          {{item}}
        </li>
      </ul>
      <ul class="ulstyle">
        <li style="font-size: 14px; font-weight: 600">金额预算：</li>
        <li v-for="(item,index) in projectMoneyList"
            :key="index"
            @click="changeMoneyfunc(index)"
            :class="[projectMoneyListActived==index?'ulstyle_color':'']"
        >
          {{item}}
        </li>
      </ul>
    </div>

    <ul class="content_box">
      <li v-for="(item,index) in projectContentList" :key="index" class="content_box_list">
        <div class="left_content">
          <img v-if="item.img" :src="item.img">
          <img v-else src="@/assets/2.jpg" >
        </div>
        <div class="right_content">
          <div class="right_content_top">
            <span>项目名称：{{item.name}}</span>
          </div>
          <div class="right_content_content">
            <span>类型：{{item.cycle}}</span>
            <span>技术栈：</span>
            <span v-for="(itemdeve,indexdeve) in item.developer" :key="indexdeve">{{itemdeve}}</span>
          </div>
          <div class="right_content_bottom">
            <span >
              发布于{{item.startTime}}小时|{{item.applicantspeo}}报名</span>
          </div>
        </div>
        <div class="content_money">
          ￥{{item.money}}
        </div>
      </li>
    </ul>
    <div class="block">
      <!--      <span class="demonstration">显示总数</span>-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="50"
        background
        layout="total, prev, pager, next"
        :total="3">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name:'companyIndex',
    data(){
      return {
        currentPage1: 5,
        roleListActived:0,
        projectListActived:0,
        projectTimeListActived:0,
        projectMoneyListActived:0,
        search:'',
        activeName:'second',
        roleList:[
          {name:'前端开发',label:'1'},
          {name:'后端开发',label:'2'},
          {name:'测试工程师',label:'3'},
          {name:'前端开发',label:'4'},
          {name:'后端开发',label:'5'},
          {name:'测试工程师',label:'6'},
          {name:'全栈工程师',label:'7'}],
        projectList:[{name:'web网页',label:'1'},
          {name:'APP开发',label:'2'},
          {name:'微信公众号',label:'3'},
          {name:'小程序',label:'4'},
          {name:'其他',label:'6'}],
        projectContentList:[
          {name:'百度网盘 好友发送指定 关键字 匹配正确后，分享指定文件给他',developer:['java','c++'],type:'web网页',cycle:'45天',money:1000,startTime:'2个小时前',applicantspeo:10},
          {name:'百度网盘 好友发送指定 关键字 匹配正确后，分享指定文件给他',developer:['vue'],type:'web网页',cycle:'45天',money:1000,startTime:'2个小时前',applicantspeo:10},
          {name:'百度网盘 好友发送指定 关键字 匹配正确后，分享指定文件给他',developer:['php'],type:'web网页',cycle:'45天',money:1000,startTime:'2个小时前',applicantspeo:10}],
        projectTimeList:['30天内','30天~60天','90天'],
        projectMoneyList:['1~100','100~300','300~500','500~1000']
      }
    },
    methods:{
      // 分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      changeMoneyfunc(index){
        this.projectMoneyListActived = index
      },
      changeTimefunc(index){
        this.projectTimeListActived = index
      },
      changeTypefunc(index){
        this.projectListActived = index
      },
      changeRolefunc(index){
        console.log(index)
        this.roleListActived = index
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      selectFunc(){
        console.log('selection',this.$axios)
        // 发送请求
        this.$ajax({
          url:'',
          method:{},
          data:{search:this.search}
        }).then(res=>{
          console.log(res,'res')
        }).catch()
      }
    }
  }
</script>

<style lang="less" scoped>
  .content{
    width: 78vw;
    margin: 0 auto;
  }
  /*.el-popover{*/
  /*  background: red;*/
  /*}*/
  .ulstyle_color{
    color: skyblue!important;
  }
  .content_box_list{
    width: 100%;
    /*height: 60px;*/
    overflow: hidden;
    background-color: white;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 5px;
    margin: 10px auto;
    position: relative;
    display: flex;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    align-items: center;
    .left_content{
      width: 70px;
      height: 70px;
      display: flex;
      /*align-content: center;*/
      /*position: absolute;*/
      /*transform: translate(0,-50%);*/
      img{
        width: 100%;
        height: 100%;
      }
    }
    .right_content{
      flex:1;
      padding-right: 50px;
      padding-left: 40px;
      font-size: 14px;
      /*background-color: skyblue;*/
      .right_content_top{
        width: 100%;
        height: 30px;
        line-height:30px;
        font-weight: 600;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        word-break:break-all;
      }
      .right_content_content{
        width: 100%;
        height: 30px;
        line-height: 30px;
      }
      .right_content_bottom{
        width: 100%;
        height: 30px;
        color: rgb(150,195,232);
        font-size: 12px;
        line-height: 30px;
      }
    }
    .content_money{
      /*width: 40px;*/
      position: absolute;
      right: 7px;
      top: 50%;
      transform: translate(0,-50%);
    }
  }
  .header_search{
    position: relative;
    width: 50%;
    margin: 0 auto;
  }
  .modalStyle{
    width: 100%;
    height: 100%;
    background-color: rgb(240,242,245);
    overflow: hidden;
  }
  .header{
    position: relative;
    width: 78vw;
    /*height: 30%;*/
    box-sizing: border-box;
    background-color: white;
    padding: 10px;
    margin: 0 auto;
    border-radius: 10px;
    margin-top: 10px;
  }
  .content{
    width: 78%;
    height: 400px;
    margin: 0 auto;
    /*background: skyblue;*/
    margin-top: 10px;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px;
  }
  .search_icon{
    position: absolute;
    top: 0;
    right: 0;
  }
  /deep/ .el-input--suffix .el-input__inner{
    padding-right: 57px;
  }
  .el-input{
    /*width: 50%;*/
    margin: 0 auto;
  }
  .ulstyle{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-size: 13px;
    /*font-weight: 600;*/
    li{
      width: 15%;
      margin: 2px;
    }
  }
  .content_box{
    width: 78vw;
    /*background-color: white;*/
    margin-top: 10px;
    border-radius: 10px;
    margin: 0 auto;
    padding: 0;
  }
  .block{
    display: flex;
    position: fixed;
    bottom: 5px;
    width: 78vw;
    /*background: rebeccapurple;*/
    left: 50%;
    transform: translate(-50%);
    justify-content: flex-end;
  }
</style>
